<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.editState.visible"
            :title="api.editState.title"
            destroy-on-close
            @close="api.onCloseEdit()"
    >
        <el-form
                ref="formRef"
                :model="api.editState.form"
                :rules="rules"
                label-width="120px"
                status-icon
        >

            <el-form-item
                    label="用户类型"
                    prop="userType"
            >
                <el-input
                        v-model="api.createState.form.userType"
                        clearable
                        placeholder="用户类型"
                />
            </el-form-item>
            <el-form-item
                    label="用户id"
                    prop="userId"
            >
                <el-input
                        v-model="api.createState.form.userId"
                        clearable
                        placeholder="用户id"
                />
            </el-form-item>
            <el-form-item
                    label="用户名"
                    prop="username"
            >
                <el-input
                        v-model="api.createState.form.username"
                        clearable
                        placeholder="用户名"
                />
            </el-form-item>
            <el-form-item
                    label="密码"
                    prop="password"
            >
                <el-input
                        v-model="api.createState.form.password"
                        clearable
                        placeholder="密码"
                />
            </el-form-item>
            <el-form-item
                    label="认证方式"
                    prop="authType"
            >
                <el-input
                        v-model="api.createState.form.authType"
                        clearable
                        placeholder="认证方式"
                />
            </el-form-item>
            <el-form-item
                    label="加密盐"
                    prop="secretSalt"
            >
                <el-input
                        v-model="api.createState.form.secretSalt"
                        clearable
                        placeholder="加密盐"
                />
            </el-form-item>
            <el-form-item
                    label="是否过期"
                    prop="accountNonExpired"
            >
                <el-input
                        v-model="api.createState.form.accountNonExpired"
                        clearable
                        placeholder="是否过期"
                />
            </el-form-item>
            <el-form-item
                    label="是否锁定"
                    prop="accountNonLocked"
            >
                <el-input
                        v-model="api.createState.form.accountNonLocked"
                        clearable
                        placeholder="是否锁定"
                />
            </el-form-item>
            <el-form-item
                    label="凭证是否过期"
                    prop="credentialsNonExpired"
            >
                <el-input
                        v-model="api.createState.form.credentialsNonExpired"
                        clearable
                        placeholder="凭证是否过期"
                />
            </el-form-item>
            <el-form-item
                    label="是否可用"
                    prop="enabled"
            >
                <el-input
                        v-model="api.createState.form.enabled"
                        clearable
                        placeholder="是否可用"
                />
            </el-form-item>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="api.onCloseEdit()">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {AccountApi} from "~/api/system/account/account.api";
import {FormRules} from "element-plus";

interface Props {
    api: AccountApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive<FormRules>({});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.editState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseEdit();
            }
        });
    }
}

</script>

<style lang="less" scoped>

</style>
